@if (module.handlerData && module.visibleoncoursepage !== 0) {
    <ion-card class="activity-card core-course-module-handler {{module.handlerData.class}}"
        [class.core-course-module-with-view]="moduleHasView" [class.item-dimmed]="module.visible === 0 || module.uservisible === false"
        (click)="moduleClicked($event)" [attr.tappable]="module.handlerData.action && module.uservisible ? '' : null"
        [class.ion-activatable]="module.handlerData.action && module.uservisible"
        [attr.aria-label]="module.handlerData.a11yTitle ? module.handlerData.a11yTitle : null" id="core-course-module-{{module.id}}">
        @if (!module.handlerData.loading) {
            <ion-item class="ion-text-wrap">
                <ion-label>
                    <div class="activity-main">
                        @if (module.handlerData.icon) {
                            <core-mod-icon [modicon]="module.handlerData.icon" [modname]="module.modname" [componentId]="module.instance"
                                [fallbackTranslation]="module.modplural" [purpose]="module.purpose" [isBranded]="module.branded" />
                        }
                        <div class="activity-title">
                            <p class="item-heading">
                                @if (module.handlerData.action && module.uservisible) {
                                    <span (ariaButtonClick)="moduleClicked($event)">
                                        <ng-container *ngTemplateOutlet="title" />
                                    </span>
                                } @else {
                                    <ng-container *ngTemplateOutlet="title" />
                                }
                                <ng-template #title>
                                    <core-format-text [text]="module.handlerData.title" contextLevel="module"
                                        [contextInstanceId]="module.id" [courseId]="module.course"
                                        [attr.aria-label]="module.handlerData.a11yTitle + ', ' + modNameTranslated" />
                                </ng-template>
                                @if (module.visible === 0 || module.uservisible === false) {
                                    <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
                                }
                                @if (prefetchStatusIcon()) {
                                    <ion-icon [name]="prefetchStatusIcon()" color="success"
                                        [attr.aria-label]="(prefetchStatusText() || '') | translate" />
                                }
                            </p>

                            @if (module.visible === 0 || module.isStealth) {
                                <div class="core-module-additional-info">
                                    <!-- Hidden badges -->
                                    @if (module.visible === 0) {
                                        <ion-badge color="secondary" class="ion-text-wrap">
                                            <ion-icon name="far-eye-slash" aria-hidden="true" />
                                            {{ 'core.course.hiddenfromstudents' | translate }}
                                        </ion-badge>
                                    } @else if(module.isStealth) {
                                        <ion-badge color="secondary" class="ion-text-wrap">
                                            <ion-icon name="fas-eye-low-vision" aria-hidden="true" />
                                            {{ 'core.course.hiddenoncoursepage' | translate }}
                                        </ion-badge>
                                    }
                                </div>
                            }
                        </div>
                        <!-- Buttons. -->
                        @if (module.uservisible !== false) {
                            <div class="core-module-buttons">
                                <!-- Module completion (legacy). -->
                                @if (module.completiondata && showLegacyCompletion) {
                                    <core-course-module-completion-legacy [completion]="module.completiondata" [moduleName]="module.name"
                                        [moduleId]="module.id" (completionChanged)="completionChanged.emit($event)" />
                                }

                                <!-- Activity completion. For tablets -->
                                @if (hasCompletion && !showLegacyCompletion) {
                                    <core-course-module-completion [completion]="module.completiondata" [moduleName]="module.name"
                                        [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions"
                                        [showManualCompletion]="showManualCompletion"
                                        (completionChanged)="completionChanged.emit($event)" />
                                }

                                <!-- Button defined by the module handler. -->
                                @if (module.handlerData.button) {
                                    <ion-button fill="clear" class="core-module-button-more core-animate-show-hide"
                                        [hidden]="module.handlerData.button.hidden || module.handlerData.spinner"
                                        (click)="buttonClicked($event)"
                                        [attr.aria-label]="module.handlerData.button.label | translate:{$a: module.handlerData.title}">
                                        <ion-icon [name]="module.handlerData.button.icon" slot="icon-only" aria-hidden="true" />
                                    </ion-button>
                                }
                            </div>
                        }
                    </div>

                    <!-- Activity dates. -->
                    @if (showActivityDates && module.dates?.length) {
                        <div class="activity-dates activity-extra">
                            <core-reminders-date *ngFor="let date of module.dates" [type]="date.dataid" [label]="date.label"
                                [time]="date.timestamp" [relativeTo]="date.relativeto" />
                        </div>
                    }

                    <!-- Activity completion. -->
                    @if (hasCompletion && !showLegacyCompletion) {
                        <core-course-module-completion class="activity-extra" [completion]="module.completiondata"
                            [moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions"
                            [showManualCompletion]="showManualCompletion" (completionChanged)="completionChanged.emit($event)" />
                    }


                    <!-- Description and restrictions -->
                    @if (module.description || (showAvailability && module.availabilityinfo)) {
                        <div id="activity-{{module.id}}-collapsible"
                            class="ion-text-wrap activity-description-availabilityinfo activity-extra" [collapsible-item]="64">
                            @if (module.description) {
                                <core-format-text class="core-module-description" [text]="module.description" contextLevel="module"
                                    [contextInstanceId]="module.id" [courseId]="module.course" />
                            }

                            <!-- Availability info -->
                            @if (showAvailability && module.availabilityinfo) {
                                <div class="core-module-availabilityinfo colored-box-with-icon">
                                    <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
                                    <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
                                        [courseId]="module.course" />
                                </div>
                            }
                        </div>
                    }

                    @if (showExtra && module.handlerData.extraBadge) {
                        <div class="ion-text-wrap activity-extrabadges activity-extra" [innerHTML]="module.handlerData.extraBadge"></div>
                    }
                </ion-label>

            </ion-item>

            @if (isLastViewed) {
                <div class="core-course-last-module-viewed colored-box-with-icon">
                    <ion-icon name="fas-eye" aria-hidden="true" />
                    {{ 'core.course.lastaccessedactivity' | translate }}
                </div>
            }

            @if (module.handlerData.action && module.uservisible) {
                <ion-ripple-effect />
            }

        } @else {
            <!-- Loading. Normally used in site plugins. -->
            <ion-item role="status" class="ion-text-wrap core-module-loading" [attr.aria-label]="module.handlerData.a11yTitle"
                [detail]="false">
                <ion-label>
                    <ion-spinner [attr.aria-label]="'core.loading' | translate" />
                </ion-label>
            </ion-item>
        }
    </ion-card>
}
